<template>
	<view class="staff">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->
		
		<!-- tab -->
		<view class="tab">
			<text v-for="(item,i) in tabs" :key="i" :data-id="i" class="tit" :class="{'cur': tabCur == i}" @tap="tabSelect">{{item.name}}</text>
		</view>
		<!-- end -->
		
		<!-- 列表 -->
		<view class="list padd_32">
			<mescroll-body top="0" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="downOption">
				<staff-list v-if="table.length" :list="table" :state="state"></staff-list>
				<view v-else class="none">
					<view class="none-body">
						<cover-image class="none-image" src="../../static/images/null.png"></cover-image>
						<view class="none-text">暂无数据</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<!-- end -->
	</view>
</template>

<script>
	import StaffList from '@/components/list/list-staff.vue'
	import PublicHeader from '@/components/PublicHeader.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	var _this
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		computed: mapState(['hasLogin', 'uerInfo']),
		components: {
			PublicHeader,
			StaffList,
			MescrollBody
		},
		data() {
			return {
				title: '员工列表',
				search: false,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true
				},
				id: '',
				value: 0,
				show: true,
				list: [],
				table: [],
				tabCur: 0,
				tabs:[{name:'全部', value: ''}, {name:'正常', value: 1}, {name:'服务中', value: 2}, {name:'休息', value: 3}],
				goods:[],
				page: 1,
				pages: 1,
				size: 10,
				state:true
			}
		},
		onLoad(option) {
			this.id = option.id
			// this.getData()
		},
		methods: {
			tabSelect(e){
				var _this = this
				_this.tabCur = e.currentTarget.dataset.id;
				_this.table = []
				_this.mescroll.resetUpScroll()
			},
			getData() {
				let _this = this
				_this.$http.post('/emp/info/query', {
					userId: _this.uerInfo.userId,
					enterpriseId: _this.id,
					page: _this.page,
					size: _this.size,
					status: _this.tabs[_this.tabCur].value
				}).
				then(function(response) {
					console.log('个人信息', response)
					if (response.success) {
						_this.table = response.data.list
						_this.pages = response.data.pages
					}
				}).catch(function(error) {
					console.log(error);
				});
			},
			//下拉刷新的回调
			downCallback(page) {
				var _this = this;
				_this.table = []
				_this.mescroll.resetUpScroll()
				// _this.page = 1,
				// 	_this.$http.post('/emp/info/query', {
				// 		userId: _this.uerInfo.userId,
				// 		enterpriseId: _this.id,
				// 		page: _this.page,
				// 		size: _this.size,
				// 		status: _this.tabs[_this.tabCur].value
				// 	})
				// 	.then(function(response) {
				// 		_this.pages = response.data.pages
				// 		//联网成功的回调,隐藏下拉刷新的状态
				// 		_this.table = response.data.list;
				// 		console.log(666666)
				// 		_this.mescroll.success();
				// 	})
				// 	.catch(function(error) {
				// 		console.log(error);
				// 		_this.mescroll.endErr();
				// 	});
			},
			//上拉加载的回调
			upCallback(page) {
				var _this = this;
				_this.$http.post('/emp/info/query', {
					userId: _this.uerInfo.userId,
					enterpriseId: _this.id,
					page: page.num,
					size: page.size,
					status: _this.tabs[_this.tabCur].value
				})
					.then(function(response) {
						_this.pages = response.data.pages
						//设置列表数据
						_this.table = _this.table.concat(response.data.list);
						_this.mescroll.endSuccess(response.data.list,response.data.total);
					})
					.catch(function(error) {
						console.log(error);
						_this.mescroll.endErr();
					});
			},

		}
	}
</script>

<style scoped lang="scss">
.header{
	height: 100rpx;
	/* line-height: 100rpx; */
	font-size: 36rpx;
	color: #333;
}
.header-text{
	margin-left: 32rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 36rpx;
	color: #333;
}
.header image{
	width: 37rpx;
	margin-top: 30rpx;
	margin-right: 37rpx;
}
.tab{
	text-align: center;
}
.tab text{
	text-align: center;
	display: inline-block;
	font-size: 32rpx;
	color: #666;
	position: relative;
	line-height: 80rpx;
}
.tab .tit{
	margin-right: 90rpx;
}
.tab .tit:last-child{
	margin-right: 0;
}
.tab .cur_sp{
	position: absolute;
}
.tab .cur{
	font-weight: 500;
	color: #333;
	border-bottom: 4rpx solid $uni-color1;
}
/* .tab .cur .cur_sp{
	width: 100%;
	height: 4rpx;
	background: $uni-color1;
	border-radius: 2rpx;
	right: 17rpx;
	bottom: 0;
} */
</style>
